<template>
	<view class="content">
		<view>
			<input type="text" v-model="name" placeholder="你的名字" />
		</view>
		<view>
			<text>{{ message }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data: {
			name: 'Jack'
		},
		computed: {
			message() {
				return `Hello, ${this.name}`;
			}
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	input {
		border-bottom: 1px solid;
	}

	.name {
		font-size: 60px;
		font-weight: 600;
	}
</style>
